<template>
  <view class="mobile-value-added-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <CustomNavbar title="手机增值业务查询" />
    <view class="service-list">
      <view class="service-item" v-for="(item, index) in serviceList" :key="index">
        <view class="service-info">
          <text class="service-name">{{ item.name }}</text>
          <text class="service-desc">{{ item.desc }}</text>
        </view>
        <view class="service-status">
          <text class="status-text" :class="item.status">{{ item.statusText }}</text>
          <text class="service-fee">¥{{ item.fee }}/月</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import CustomNavbar from '@/components/CustomNavbar.vue'
import { ref } from 'vue'

const serviceList = ref([
  { 
    name: '5G流量包', 
    desc: '每月10GB流量', 
    status: 'active', 
    statusText: '已开通',
    fee: '10.00'
  },
  { 
    name: '来电显示', 
    desc: '显示来电号码', 
    status: 'active', 
    statusText: '已开通',
    fee: '5.00'
  },
  { 
    name: '彩铃', 
    desc: '个性化彩铃服务', 
    status: 'inactive', 
    statusText: '未开通',
    fee: '3.00'
  },
  { 
    name: '国际漫游', 
    desc: '国际漫游服务', 
    status: 'inactive', 
    statusText: '未开通',
    fee: '0.00'
  }
])
</script>

<style scoped>
.mobile-value-added-page {
   
  position: relative;
  z-index: 1;
  padding-top: calc(var(--status-bar-height) + 44px);
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

.service-list {
  background: #fff;
  margin-top: 20rpx;
}

.service-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.service-item:last-child {
  border-bottom: none;
}

.service-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.service-desc {
  font-size: 24rpx;
  color: #999;
}

.service-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.status-text {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
  margin-bottom: 8rpx;
}

.status-text.active {
  color: #07C160;
  background: #E8F5E9;
}

.status-text.inactive {
  color: #999;
  background: #F5F5F5;
}

.service-fee {
  font-size: 24rpx;
  color: #666;
}
</style>

